<template>
  <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watchEffect } from 'vue'
const props = defineProps({
  xData: {
    type: Array,
    default: () => [],
  },
  sData: {
    type: Array,
    default: () => [],
  },
  data1: {
    type: Array,
    default: () => [],
  },
  data2: {
    type: Array,
    default: () => [],
  },
  data3: {
    type: Array,
    default: () => [],
  },
  resultData: {
    type: Array,
    default: () => [],
  },
})
const x1Data = ref([])
//展示数据
const optionData = ref([])
//扇形图颜色数据
const colorList = [
  { color1: 'rgba(76,167,163,0.9)', color2: 'rgba(90,255,223,1)' },
  { color1: 'rgba(65,149,99,0.9)', color2: 'rgba(115,255,145,1)' },
  { color1: 'rgba(98,167,131,0.9)', color2: 'rgba(153,255,179,1)' },
  { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
  { color1: 'rgba(190,164,75,0.9)', color2: 'rgba(255,207,74,1)' },
  { color1: 'rgba(165,123,98,0.9)', color2: 'rgba(254,178,128,1)' },
  { color1: 'rgba(105,123,186,0.9)', color2: 'rgba(151,176,255,1)' },
  { color1: 'rgba(106,102,173,0.9)', color2: 'rgba(164,151,255,1)' },
  { color1: 'rgba(106,76,178,0.9)', color2: 'rgba(159,110,254,1)' },
  { color1: 'rgba(134,109,188,0.9)', color2: 'rgba(180,143,241,1)' },
  { color1: 'rgba(54,122,194,0.9)', color2: 'rgba(76,174,254,1)' },
  { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
  { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
]
//请求的数据
const resultData = [
  {
    name: '足疗、按摩',
    count: '2',
  },
  {
    name: '商店',
    count: '1',
  },
  {
    name: '教学培训',
    count: '1',
  },
  {
    name: '茶社',
    count: '1',
  },
  {
    name: '棋牌室',
    count: '2',
  },
  {
    name: '医疗诊所',
    count: '1',
  },
  {
    name: '美容美发',
    count: '2',
  },
  {
    name: '网吧',
    count: '2',
  },
  {
    name: 'KTV',
    count: '3',
  },
  {
    name: '美甲美睫',
    count: '2',
  },
  {
    name: '餐饮',
    count: '2',
  },
  // {
  //   name: '其他',
  //   value: 80,
  // },
]
let sum = 0
resultData.forEach((item) => {
  sum += item.value
})
resultData.forEach((item) => {
  optionData.value.push({ value: item.count, name: item.name })
  optionData.value.push({
    name: '',
    // value: sum / 100,
    value: sum,
    itemStyle: { color: 'transparent' },
  })
})
const option = {
  //   backgroundColor: '#001829',
  legend: [
    // {
    //   orient: 'vertical',
    //   right: '32%',
    //   top: '0%',
    //   itemGap: 30,
    //   textStyle: {
    //     color: '#ffffff',
    //     fontSize: 12,
    //   },
    //   data: ['其他'],
    // },
    {
      orient: 'vertical',
      right: '18%',
      top: '0%',
      itemGap: 30,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      data: resultData.map((item) => item.name).slice(0, 6),
    },
    {
      orient: 'vertical',
      right: '2%',
      top: '0%',
      itemGap: 30,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
      },
      data: resultData.map((item) => item.name).slice(6, 12),
    },
  ],
  tooltip: {
    trigger: 'item',
    formatter(params) {
      let res = ''
      const { marker, name, value } = params
      if (name !== '') {
        res += `${marker}${name}:${value}`
      }
      return res
    },
  },
  series: [
    {
      type: 'pie',
      roseType: 'radius',
      radius: ['10%', '50%'],
      center: ['37%', '50%'],
      label: {
        // position: 'inside',
        formatter(item) {
          // console.log('@item', item)
          if (item.name === '') {
            return ''
          }
          //   return `${item.value}%`
          return item.name + '(' + item.value + ')'
        },
        textStyle: {
          fontSize: 12,
          color: '#ffffff',
        },
      },
      labelLine: {
        show: true,
      },
      itemStyle: {
        normal: {
          color(params) {
            return colorList[parseInt(params.dataIndex / 2)].color1
          },
        },
      },
      z: 3,
      data: optionData.value,
    },
  ],
}

watchEffect(() => {
  // console.log('@props.resultData', props.resultData)
  // x1Data.value = props.resultData.map((item) => item.name).slice(0, 6)
  // console.log('@x1Data.value', x1Data.value)
  // chart.value.removeAttribute('_echarts_instance_')
  // const myChart = echarts.init(chart.value)
  // myChart.setOption(option)
})

const chart = ref()
let timer1 = null
onMounted(() => {
  chart.value.removeAttribute('_echarts_instance_')
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    // 在窗口尺寸变化时重新刷新图表
    myChart.resize()
  })
})
</script>
<style scoped lang="scss">
.chart-render-box {
  width: 100%;
  height: 100%;
  flex: 1;
}
</style>
